
// author: 柳双俊

// 国外数据
//https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign
var foreignData = null;
// 国内数据
//https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
var chinaData = null;

$.when(
    $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: 'jsonp',
        success: function (data) {
            console.log('国外疫情');
            foreignData = JSON.parse(data.data);
            console.log(foreignData);
        }
    }),
    $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
        dataType: 'jsonp',
        success: function (data) {
            console.log('国内疫情');
            chinaData = JSON.parse(data.data);
            console.log(chinaData);
        }
    })
).then(function () {
    //设置标题
    title();
    //设置总览数据
    brief();
    //世界疫情地图
    map();
    //疫情趋势图表
    tendency();
    //昨日新增确证国家 Top10 图
    top10();
})

//设置标题
function title() {
    $('.brief .brief_header p').text("更新时间 - " + chinaData.lastUpdateTime)
}

//设置总览数据
function brief() {
    var htmlStr = `
            <li class="allConfirm">
            <div class="number">${foreignData.globalStatis.confirm}</div>
            <div class="item">累计确诊</div>
            <div class="change"><span>昨⽇</span><b>+${foreignData.globalStatis.confirmAdd}</b></div>
        </li>
        <li class="nowConfirm">
            <div class="number">${foreignData.globalStatis.nowConfirm}</div>
            <div class="item">现有确诊</div>
            <div class="change"><span>昨⽇</span><b>+${foreignData.globalStatis.nowConfirmAdd}</b></div>
        </li>
        <li class="deadNum">
            <div class="number">${foreignData.globalStatis.dead}</div>
            <div class="item">死亡⼈数</div>
            <div class="change"><span>昨⽇</span><b>+${foreignData.globalStatis.deadAdd}</b></div>
        </li>
        <li class="cureNum">
            <div class="number">${foreignData.globalStatis.heal}</div>
            <div class="item">治愈⼈数</div>
            <div class="czhange"><span>昨⽇</span><b>+${foreignData.globalStatis.healAdd}</b></div>
        </li>`
    $(".brief_body").html(htmlStr)
}

//世界疫情地图
function map() {
    var virusDatas = [];
    // 遍历数据，获取⽬标信息
    // 提取出全国疫情的国家名称和数量
    $.each(foreignData.foreignList, function (i, v) {
        virusDatas[i] = {};
        virusDatas[i].name = v.name;
        virusDatas[i].value = v.confirm;
    })
    // 加⼊中国数据
    virusDatas.push({
        name: "中国",
        value: chinaData.chinaTotal.confirm
    });

    //初始化ECharts图表
    var myChart = echarts.init(document.querySelector('.brief .map_info'));
    //配置图表(配置项)
    var option = {
        //鼠标悬停提示信息
        tooltip: {
            // 设置提示信息触发源
            trigger: 'item',
            // 设置提示信息格式
            formatter: function (param) {
                return param.name + ' : ' + (param.value ? param.value : 0);
            }
        },
        //标题
        title: {
            text: '全国疫情'
        },
        // 视觉映射组件
        visualMap: {
            // 设置映射类型：piecewise分段型、continuous连续性
            type: 'piecewise',
            pieces: [
                { max: 0, label: '0', color: '#fff' },
                { min: 1, max: 499, label: '1-499', color: '#fff7ba' },
                { min: 500, max: 4999, label: '500-4999', color: '#ffc24b' },
                { min: 5000, max: 9999, label: '5000-9999', color: '#ff7c20' },
                { min: 10000, max: 100000, label: '1万-10万', color: '#fe5e3b' },
                { min: 100000, max: 500000, label: '10万-50万', color: '#e2482b' },
                { min: 500000, label: '50万以上', color: '#b93e26' },
            ],
            //设置图标
            itemWidth: 10,
            itemHeight: 10,
            inverse: true
        },
        //系列图表
        series: [{
            // data:国家的数据
            data: virusDatas,
            //名称
            name: '',
            //绘制图表的类型
            type: 'map',
            //指定地图名称
            mapType: 'world',
            // 地区名称映射
            nameMap: nameMap,
            // 图表所绘制区域样式
            itemStyle: {
                emphasis: {
                    areaColor: '#c9ffff',
                    label: {
                        //鼠标悬停不显示文字
                        show: false
                    }
                }
            },
            //地图的位置和容器位置中心对齐
            layoutCenter: ['center', 'center'],
            //地图的缩放
            layoutSize: '180%'
        }]
    };
    //绘制图表
    myChart.setOption(option);

    // 绑定事件、切换数据
    // 现存确证
    $(".brief .map_tab span").eq(1).click(function () {
        // 遍历数据，获取⽬标信息
        // 提取出全国疫情的国家名称和数量
        $.each(foreignData.foreignList, function (i, v) {
            virusDatas[i].value = v.nowConfirm;
        })
        // 加⼊中国数据
        virusDatas[virusDatas.length - 1].value = chinaData.chinaTotal.nowConfirm
        //重新将数据赋值
        option.series[0].data = virusDatas;
        //重新绘制图表
        myChart.setOption(option);
    });
    //累计确证
    $(".brief .map_tab span").eq(0).click(function () {
        // 遍历数据，获取⽬标信息
        // 提取出全国疫情的国家名称和数量
        $.each(foreignData.foreignList, function (i, v) {
            virusDatas[i].value = v.confirm;
        })
        // 加⼊中国数据
        virusDatas[virusDatas.length - 1].value = chinaData.chinaTotal.confirm
        //重新将数据赋值
        option.series[0].data = virusDatas;
        //重新绘制图表
        myChart.setOption(option);
    });
    // ⿏标点击切换图表时,按钮⾼亮
    $(".map_tab span").click(function () {
        $(this).addClass("cur").siblings().removeClass("cur");
    })
}

//疫情趋势图表
function tendency() {
    // 获取历史数据
    var globalDailyHistory = foreignData.globalDailyHistory;
    // 设置容器分别保存数据
    var num = [], date = [];
    globalDailyHistory.reverse();
    globalDailyHistory.shift()
    $.each(globalDailyHistory, function (i, v) {
        // 保证数据数量为27，获取间隔3天的数据记录
        if (num.length < 27 && i % 3 == 0) {
            num.push(v.all.newAddConfirm);
            date.push(v.date);
        }
    })

    //初始化EChart实例
    var myChart = echarts.init(document.querySelector(".tendency .map_info"));
    //设置配置项(绘制图表)
    // 设置基本配置项：只有title和series
    var option = {
        //鼠标悬停提示
        tooltip: {
            //自己定制
            formatter: function (param) {
                return param.seriesName + "<br>" + param.marker + " " + param.name + " - " + param.value
            }
        },
        //标题
        title: {
            text: "海外疫情新增确证趋势"
        },
        //设置图例样式
        legend: {
            icon: "rect",//形状
            itemWidth: 12,//大小
            itemHeight: 12,
            right: 20,//位置
            top: 20,
            orient: 'horizontal',//水平排列 vertical:垂直排列
            //文本与图例对齐
            textStyle: {
                padding: [3, 0, 0, 0]
            }
        },
        //X轴
        xAxis: {
            type: 'category',
            data: date.reverse(),
            //文字间隔为0,文字倾斜
            axisLabel: {
                interval: 0,
                rotate: 45,
                fontSize: 10,
                // color: '#ccc'
            }
        },
        //Y轴
        yAxis: {
            type: 'value',
            min: 0,
            max: 120000,
            //不显示线条
            axisLine: {
                show: false
            },
            //label没有逗号
            axisLabel: {
                formatter: function (value) {
                    return value.toString();
                }
            },
            //不显示刻度
            axisTick: {
                length: 0
            }
        },
        //数据
        series: [{
            name: "新增确诊",
            type: 'line',
            data: num.reverse(),
            //柔顺线条
            smooth: true,
            //更改线条的样式
            lineStyle: {
                color: "#ff1d00"
            }
        }]
    };
    //绘制图表
    myChart.setOption(option);
    //绑定事件,切换数据
    $(".tendency .map_tab span").eq(0).click(function () {
        // 重新过滤数据：
        var num = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num.length < 27 && i % 3 == 0) {
                num.push(v.all.newAddConfirm);
                date.push(v.date);
            }
        })
        // 根据新数据修改option配置项
        option.series = [{
            name: "新增确诊",
            data: num.reverse(),
            type: 'line',
            smooth: true,
            lineStyle: {
                color: "#ff3d18"
            }
        }]
        option.yAxis.max = 120000;
        option.yAxis.splitNumber = 7;
        option.yAxis.axisLabel.formatter = function (value, index) {
            return value.toString();
        }
        // 重新绘制图表
        myChart.clear();
        myChart.setOption(option, true);
    })
    $(".tendency .map_tab span").eq(1).click(function () {
        // 重新过滤数据
        var num1 = [];
        // 现有确诊 = confirm
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                // 累计确诊 = 现有确诊 + 治愈人数 + 死亡人数
                num1.push(v.all.confirm + v.all.heal + v.all.dead);
                num2.push(v.all.confirm);
                date.push(v.date);
            }
        })
        //给series设置元素(设置item)
        option.series = [
            {
                name: "累计确诊",
                type: 'line',
                data: num1.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#c1021b"
                }
            },
            {
                name: "现有确诊",
                type: 'line',
                data: num2.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#264654"
                }
            },
        ]
        //设置Y轴坐标最大值
        option.yAxis.max = 3500000;
        //设置Y轴分割线
        option.yAxis.splitNumber = 8;
        //鼠标悬停提示框 自定义格式
        option.yAxis.axisLabel.formatter = function (value) {
            return value.toString();
        }
        // 清除图表
        myChart.clear();
        // 重新渲染图表
        myChart.setOption(option)
    })
    $(".tendency .map_tab span").eq(2).click(function () {
        var num1 = [];
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(v.all.dead);
                num2.push(v.all.heal);
                date.push(v.date);
            }
        })
        option.series = [
            {
                name: "死亡数",
                type: 'line',
                data: num1.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#ff3d18"
                }
            },
            {
                name: "治愈数",
                type: 'line',
                data: num2.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#264654"
                }
            },
        ]
        option.yAxis.max = 600000;
        option.yAxis.splitNumber = 7;
        option.yAxis.axisLabel.formatter = function (value) {
            return value.toString();
        }
        // 清除图表
        myChart.clear();
        // 重新渲染图表
        myChart.setOption(option)
    })
    $(".tendency .map_tab span").eq(3).click(function () {
        var num1 = [];
        var num2 = [];
        var date = [];
        $.each(globalDailyHistory, function (i, v) {
            if (num1.length < 27 && i % 3 == 0) {
                num1.push(v.all.deadRate);
                num2.push(v.all.healRate);
                date.push(v.date);
            }
        })
        option.series = [
            {
                name: "病死率",
                type: 'line',
                data: num1.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#ff3d18"
                }
            },
            {
                name: "治愈率",
                type: 'line',
                data: num2.reverse(),
                smooth: true,
                lineStyle: {
                    color: "#264654"
                }
            },
        ]
        option.yAxis.max = 35;
        option.yAxis.splitNumber = 7;
        // 设置Y轴刻度文本是百分比
        option.yAxis.axisLabel.formatter = function (value) {
            return value + "%";
        }
        // 清除图表
        myChart.clear();
        // 重新渲染图表
        myChart.setOption(option)
    })
}

//昨日新增确证国家 Top10 图
function top10() {
    //过滤数据
    var num = [];//数据
    var nation = [];//国家名称
    $.each(foreignData.countryAddConfirmRankList, function (i, v) {
        num.push(v.addConfirm);
        nation.push(v.nation);
    })

    //初始化echart实例
    var myChart = echarts.init(document.querySelector(".addTop10 .map_info"));
    //设置配置项(绘制图表)
    var option = {
        //标题
        title: {
            text: "全球top10"
        },
        //X轴
        xAxis: {
            type: 'category',
            //设置国家名称
            data: nation,
            axisLabel: {
                interval: 0, //间隔0
                //rotate: 45, //倾斜45
                fontSize: 12 //文字大小
            }
        },
        //Y轴
        yAxis: {
            type: 'value'
        },
        //定制列表系列
        series: {
            //图表类型 柱状图
            type: 'bar',
            //设置数据
            data: num,
            barWidth:20, //柱状图宽度
            itemStyle:{
                //高亮颜色
                emphasis:{
                    //鼠标经过颜色
                    color: "#ffdf4f"
                }
            }
        }

    }

    //绘制图表
    myChart.setOption(option);
}
